<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tiles</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css?version=04.22.2013">
</head>
<body>

    <div id="divCanvas" class="canvas">
        <canvas id="canvas" tabindex="1" width="640" height="600"></canvas>
    </div>

    <div id="divDebug" class="resizable">
        <h3 class="ui-widget-header">Debug</h3>
        <div class="scrollable">
            <div style="margin-top: 16px; margin-left: 8px; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                <textarea id="txtDebug"></textarea>
            </div>
        </div>
    </div>

    <div id="divCombat" class="resizable">
        <!--        Code in combat.js-->
        <h3 class="ui-widget-header">Combat</h3>
        <table style="width: 98%;" class="combat">
            <tr>
                <td>
                    <p>Choose player:</p>
                </td>
                <td>
                    <p>Target:</p>
                </td>
                <td>
                    <p>Attack type:</p>
                </td>
                <td>
                    <p>Action:</p>
                </td>
            </tr>
            <tr>
                <td>
                    <select id="selectPlayer" name="optPlayer" size="4">
                        <option value="Player 1">Player 1</option>
                        <option value="Player 2">Player 2</option>
                        <option value="Player 3">Player 3</option>
                        <option value="Player 4">Player 4</option>
                    </select>
                </td>
                <td>
                    <select id="selectTarget" name="optTarget" size="4">
                        <option value="Monster 1">Monster 1</option>
                        <option value="Monster 2">Monster 2</option>
                        <option value="Monster 3">Monster 3</option>
                        <option value="Monster 4">Monster 4</option>
                    </select>
                </td>
                <td>
                    <select id="selectAttack" name="optAttack" size="4" onchange='combat.ChooseAttack();'>
                        <option value="strength">Strength</option>
                        <option value="magic">Magic</option>
                        <option value="agility">Agility</option>
                        <option value="willpower">Willpower</option>
                        <option value="items">Items</option>
                        <option value="skip">Skip Player</option>
                    </select>
                </td>
                <td>
                    <select id="selectAction" name="optAction" size="4">
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Run" onclick='combat.Run();' /></td>
                <td>
                    <input type="button" value="things" onclick='combat.makeSelection();' /></td>
                <td>
                    <input type="button" value="Clear list" onclick="combat.ClearList();" /></td>
                <td>
                    <input type="button" value="Add to list" onclick="combat.AddToList();" /></td>
            </tr>
        </table>
        <div id="divCombatText">
            <textarea id="txtCombat"></textarea>
        </div>
    </div>

    <div id="divSettings" class="resizable">
        <h3 class="ui-widget-header">Settings</h3>
        <div class="scrollable">
            <input id="btnPlay" type="button" value="Play Sound" onclick="engine.PlaySound('data/Sounds/fluteloop.wav');" />
            <input id="btnLoop" type="button" value="Play Loop " onclick="engine.PlaySound('data/Sounds/fluteloop.wav', true);" />
            <input id="btnHeal" type="button" value="Play Heal" onclick="engine.PlaySound('data/Sounds/heal.ogg');" />
            <input id="btnHealLoop" type="button" value=" Play Loop" onclick="engine.PlaySound('data/Sounds/heal.ogg', true);" />
            <input id="btnDetectGlobals" type="button" value="Detect Globals" onclick="engine.DetectGlobals();" />
            <input id="btnClear" type="button" value="Clear Debug Text" onclick="document.getElementById('txtDebug').value = ''" /><br />
            <input id="chkDoubleBuffer" type="checkbox" onclick="engine.doublebuffer = this.checked;" />
            <label for="chkDoubleBuffer">Use double buffering</label><br />
            <input id="chkRequestAnim" type="checkbox" onclick="window.useanimframe = this.checked;" />
            <label for="chkRequestAnim">Use requestAnimationFrame</label><br />
            <input id="chkDumpSamples" type="checkbox" onclick="engine.dumpsamples = this.checked;" />
            <label for="chkDumpSamples">Dump timings</label><br />

            <input id='chkShowPath' type="checkbox" checked="checked" onclick="pathing.showpath = this.checked;" />
            <label for="chkShowPath">Show Path</label><br />
            <input id='chkShowRegion' type="checkbox" onclick="tilemap.Set('showregion', this.checked);" />
            <label for="chkShowRegion">Show Region</label><br />
            <input id='chkShowGrid' type="checkbox" onclick="tilemap.Set('showgrid', this.checked);" />
            <label for="chkShowGrid">Show grid</label><br />
            <input id='chkShowBlocks' type="checkbox" onclick="tilemap.Set('showblocks', this.checked);" />
            <label for="chkShowBlocks">Show blocks</label><br />
            <label for="sldBlocksize" style="margin-left: 32px;">Blocksize in pixels:</label>
            <div id="sldBlocksize" class="slider"></div>
            <br />
            <input id="chkRoundCorners" type="checkbox" checked="checked" onclick="tilemap.Set('roundcorners', this.checked);" />
            <label for="chkRoundCorners">Round corners </label>
            <a href="http://www.gamedev.net/page/resources/_/technical/game-programming/tilemap-based-game-techniques-handling-terrai-r934" target="_blank">(Theory)</a><br />

            <p>Pathfinding: <a href="http://theory.stanford.edu/~amitp/GameProgramming/Heuristics.html">(Heuristics)</a> <a href="http://www.eddiescholtz.com/entry/pathfinding-optimization-flood-fill">Flood fill optimization</a></p>
            &nbsp;&nbsp;&nbsp;&nbsp;<input id="radManhattan" type="radio" name="heuristic" onclick="pathing.heuristic = 'manhattan'" checked="checked">Manhattan
        <input id="radEuclidean" type="radio" name="heuristic" onclick="pathing.heuristic = 'euclidean'">Euclidean
        <input id="radDijkstra" type="radio" name="heuristic" onclick="pathing.heuristic = 'dijkstra'">Dijkstra<br />
        <input id='chkSubdividePath' type="checkbox" checked="checked" onclick="pathing.subdividepath = this.checked" />
            <label for="chkSubdividePath">Subdivide path</label><br />
        </div>

    </div>

    <div id="divDesign" class="resizable" style="width: 720px; overflow: hidden;">
        <h3 class="ui-widget-header">Design</h3>
        <div class="scrollable">
            <div style="width: 167px; float: left">
                <input id="btnSaveLevel" type="button" value="Save Level" onclick="tilemap.Save(tilemap.id);" />
                <input id="btnLoadLevel" type="button" value="Load Level" onclick="tilemap.Load(tilemap.id);" />
                <input id="btnTest" type="button" value="Test" onclick="engine.Test();" /><br />
                <input id="btnRandom" type="button" value="Randomize" onclick="tilemap.Randomize(document.getElementById('txtSize').value);" />
                <input id="txtSize" type="text" value="4.0" /><br />
                <input id="btnClearMap" type="button" value="Clear" onclick="tilemap.SetSize(document.getElementById('txtWidth').value, document.getElementById('txtHeight').value);" />
                <input id="txtWidth" type="text" value="35" style="width: 25px;" /><input id="txtHeight" type="text" value="25" style="width: 25px;" /><br />
                <input id="btnWalkToTopLeft" type="button" value="Walk to top left" onclick="engine.MoveToTile(0, 0);" />
                <input id="btnWalkToCenter" type="button" value="Walk to center" onclick="engine.MoveToTile(tilemap.Width() / 2, tilemap.Height() / 2);" />
                <input id="btnWalkToLowerRight" type="button" value="Walk to bottom right" onclick="engine.MoveToTile(tilemap.Width() - 1, tilemap.Height() - 1);" />
            </div>
            <select id="selectTileset" onchange="imgTileset.src = 'data/Graphics/Sarah/' + this.options[this.selectedIndex].value + '.png';">
                <option id="tileset1" value="TILEMAP">Background Tiles</option>
                <option id="tileset2" value="0" selected="selected">Morphing Tiles</option>
            </select><br />
            <img id="imgTileset" src="data/Graphics/Sarah/0.png" style="float: left;" onmousedown="engine.On_ClickTile(event, this, document.getElementById('selectTileset').value);" />
        </div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="Scripts/_references.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/misc.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/tilemap.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/timings.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/sprite.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/ui.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/engine.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/Effects.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/graphicmanager.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/Attacks.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/combat.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/ego.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/pathing.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/_startup.js?version=04.22.2013"></script>
    <script type="text/javascript" src="Scripts/_globals.js?version=04.22.2013"></script>
    <p>
        &nbsp;
    </p>
    <p>
        &nbsp;
    </p>
    <p>
        &nbsp;
    </p>
    <p>
        &nbsp;
    </p>
    <p>
        &nbsp;
    </p>
</body>
</html>
